<template>
	<view class="login_bg">
		<dsl-navbar title="" bgTopImg="" isBack backBg="white"></dsl-navbar>
		<view class="rowsc ">
			<image src="" mode="" class="logo"></image>
		</view>
		<view class="rowsc margin-top-xl">
			<view class="margin-top-xl">
				<view class="input_bdoy  align-center">
					<view class="align-center text-xl text-white">
						<view class="margin-left" >手机号：</view>
						<view>
							<input type="text" value="" placeholder="请输入手机号" placeholder-class="text-white text-lg" />
						</view>
					</view>
				</view>
				<view class="input_bdoy   align-center margin-top">
					<view class="align-center text-xl text-white">
						<view class="margin-left" >验证码：</view>
						<view>
							<input type="text" value="" placeholder="请输入验证码" maxlength="6"
								placeholder-class="text-white text-lg" />
						</view>
						<view @click="getCode" class="code_button">
							{{ count|| '获取验证码'}}
						</view>
					</view>
				</view>
				<view class="input_bdoy  align-center">
					<view class="align-center text-xl text-white">
						<view class="margin-left" >密码：</view>
						<view>
							<input type="text" value="" placeholder="请输入密码" placeholder-class="text-white text-lg" />
						</view>
					</view>
				</view>
				<view class="input_bdoy  align-center">
					<view class="align-center text-xl text-white">
						<view class="margin-left" >确认密码：</view>
						<view>
							<input type="text" value="" placeholder="请输入密码" placeholder-class="text-white text-lg" />
						</view>
					</view>
				</view>
			
				<view class="submit_body ">
					确定
				</view>
			
				<view class="align-center rowsc margin-top">
					<image :src=" false? '/static/login/icon_weixuan.png' :'/static/login/icon_xuanzhong.png'"
						mode="widthFix" style="width: 30rpx;"></image>
					<view class="text-center">
						<text style="color: #EAA019;">《用户协议》</text>
						<text style="color: #EAA019;">《隐私协议》</text>
						阅读并同意
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 0
			}
		},
		methods: {
			//获取验证码
			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count -= 1;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		color: white;
	}

	.login_bg {
		background-image: url(https://img0.baidu.com/it/u=1921453740,1986042499&fm=26&fmt=auto);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-size: 100% 100%;

	}

	.logo {
		width: 162rpx;
		height: 162rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 9rpx;
		margin-top: 200rpx;
	}

	.input_bdoy {
		width: 630rpx;
		height: 100rpx;
		position: relative;
		border-bottom: 1upx solid rgba(255, 255, 255,0.8);
	}

	.code_button {
		width: 166rpx;
		height: 54rpx;
		border: 2rpx solid #EAA019;
		border-radius: 30rpx;
		line-height: 54rpx;
		font-size: 24rpx;
		text-align: center;
		color: #EAA019;
		position: absolute;
		right: 30rpx;
	}

	.submit_body {
		width: 630rpx;
		height: 94rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		line-height: 94rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 90rpx;
		
	}

	.login_w {
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 80rpx;
	}
</style>
